import Vue from 'vue'
import Vuex from 'vuex'
// 多次导入axios其它是再一个axios.第二次之后的导入都是从缓存中获取
import axios from 'axios'

// vuex中存储数据
// 好处: vuex是响应式
// 弊端: 当页面刷新,vuex数据会重新加载
// 解决弊端: 让数据持久化 本地存储:localStorage sessionStorage cookie
// 方案: 设置vuex的值时,也一起将数据存在本地存储

// 第三方包实现vuex中state中数据持久化
// 1.下载导入包 vuex-persistedstate
import createPersistedState from 'vuex-persistedstate'

Vue.use(Vuex)

const store = new Vuex.Store({
  // 2.注册插件
  plugins: [createPersistedState()],
  state: {
    // 定义token值
    // token: localStorage.getItem('token')
    token: '',
    // 用户信息
    userinfo: {}
  },
  getters: {
  },
  mutations: {
    // 修改token值的方法 参数:state payload
    updateToken (state, newToken) {
      // 修改state中的数据
      state.token = newToken
      // 保存到本地存储中: 键值对:值是字符串
      // localStorage.setItem('token', newToken)
    },
    // 设置用户信息
    updateUserInfo (state, newUserInfo) {
      state.userinfo = newUserInfo
    }
  },
  actions: {
    // context就是store实例
    async initUserInfo (context) {
      // ajax获取用户信息
      const { data: res } = await axios.get('/my/userinfo')
      // console.log(res)
      if (res.code === 0) {
        context.commit('updateUserInfo', res.data)
      }
    }
  },
  modules: {
  }
})

export default store
